<!DOCTYPE html> 
<html> 
	
<!-- Mirrored from jquerymobile.com/demos/1.0b1/docs/pages/link-formats.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 27 Jun 2011 17:13:56 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Links</title> 
	<link rel="stylesheet"  href="../../../../../code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />  
	<link rel="stylesheet" href="../assets/css/jqm-docs.css"/>
	<script src="../../../../../code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../assets/js/jqm-docs.js"></script>
	<script src="../../../../../code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Link formats</h1>
		<a href="../../index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
			<p>All standard HTML link types are supported in jQuery Mobile. To make the experience as polished as possible, any links to pages within the same domain will be automatically turned into Ajax requests and displayed with an animated page transition by the framework. </p>
			<p>Links that point to other domains or that have <code>rel="external"</code>, <code>data-ajax="false"</code> or <code>target</code> attributes will not be loaded with Ajax and will cause a full page refresh. If multiple "pages" are contained within a single HTML document, they can be linked by referencing the ID of the page as an anchor (#foo).</p>
			<p>All other types of links like <code>mailto:</code> and <code>tel:</code> aren't impacted by the framework and will work as expected. Learn more about the <a href="docs-navmodel.html">linking and navigation model</a> in jQuery Mobile</p>
			
			<ul data-role="listview" data-inset="true">
				<li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
				<li><a href="../../index-2.html">Link in the same domain</a></li>
				<li><a href="dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
				<li data-role="list-divider">Links that will refresh the page</li>
				<li><a href="http://www.jquery.com/">External domain</a></li>
				<li><a href="../../index-2.html" rel="external">Link with rel="external"</a></li>
				<li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
				<li><a href="../../index-2.html" target="foo">Link with target="foo"</a></li>
				<li data-role="list-divider">Email links</li>
				<li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
				<li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>

				<li data-role="list-divider">Phone links</li>
				<li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
				<li data-role="list-divider">Other</li>
				<li><a href="#">A href="#" will return false</a></li>
			</ul>

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="docs-pages.html">Anatomy of a page</a></li>
								<li><a href="docs-transitions.html">Page transitions</a></li>
								<li><a href="docs-dialogs.html">Dialogs</a></li>
								<li><a href="docs-navmodel.html">Navigation: Ajax, hashes &amp; history</a></li>
								<li data-theme="a"><a href="link-formats.html">Link format examples</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2011 The jQuery Project</p>
			</div>

			</div><!-- /page -->

			</body>
			
<!-- Mirrored from jquerymobile.com/demos/1.0b1/docs/pages/link-formats.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 27 Jun 2011 17:13:56 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->
</html>
